<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>派遣事件</title>
        <style type="text/css">
            .wrapper { border: 1px solid blue ; text-align: center; }
            .odd { background-color: rgb(255, 255, 233); font-size: 30px ; color: blue ; }
        </style>
    </head>
    <body>

        <button type="button">点我可以修改div的样式</button>

        <hr>

        <div class="wrapper first second abc xyz suibian xia-xie-de">
            大家好，我是马飞燕，我来自马踏飞燕的故乡甘肃武威
        </div>

        <script type="text/javascript">
            // 注意这里的 button 是标签名称(也叫元素名称)
            const btn = document.querySelector( 'button' );
            const wrapper = document.querySelector( '.wrapper' );

            const type = '羡慕嫉妒恨' ;
            // 使用 Event 构造函数创建 type 对应的 自定义事件
            const event = new Event( type ) ;

            let listener = {
                handleEvent(){
                    console.log( arguments[ 0 ] );
                    wrapper.classList.add( 'odd' );
                }
            }
            // 为 wrapper 绑定 type 对应的事件监听器
            wrapper.addEventListener( type , listener , false );
            // target.addEventListener( type , listener , useCapture );

            let fn = e => { 
                console.log( '事件目标: ' , e.target );
                // 通过 wrapper 来派遣 event 事件
                wrapper.dispatchEvent( event );
            }
            btn.addEventListener( 'click' , fn , false );
        </script>
        
    </body>
</html>